<template>
    <base-breadcrumb :title="$route.meta.title">
        <!-- 党务监督编辑 -->
        <a-form-model
            ref="ruleForm"
            :model="form"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 18 }"
            :rules="editModel != 0 ? rules : {}"
        >
            <a-spin :spinning="loading">
                <!-- 表格 -->
                <a-card :bordered="false">
                    <title-name title="基本信息"></title-name>
                    <custom-form
                        :formList="formList"
                        :form="form"
                        @getOption="getOption"
                        :editModel="editModel == 0 ? '' : ''"
                    >
                        <!-- 附件上传 -->
                        <template #fileInfos>
                            <template v-if="editModel != 0">
                                <l-table businessCode="UN07" :uploadArrys.sync="form.fileInfos"></l-table>
                                <div class="file_prompt">支持扩展名：.rar .zip .doc .docx .pdf .jpg...</div>
                            </template>
                            <file-link v-else :fileList="form.fileInfos" style="margin-top: -3px"></file-link>
                        </template>
                    </custom-form>
                </a-card>
                <a-card v-if="editModel == 0">
                    <title-name title="上报情况"></title-name>
                    <s-table
                        ref="table"
                        tableLayout="fixed"
                        size="default"
                        rowKey="id"
                        :columns="columns"
                        :data="loadData"
                        :alert="true"
                        show-size-changer
                        show-quick-jumper
                        showPagination="auto"
                    >
                        <template slot="fileInfos" slot-scope="text, record">
                            <file-link :fileList="record.fileInfos" style="margin-top: -3px"></file-link>
                        </template>
                    </s-table>
                </a-card>
            </a-spin>
            <!-- 页脚操作栏 -->
            <div class="btn_box page-btn-right-top">
                <a-button
                    :loading="loading"
                    v-if="editModel != 0"
                    type="primary"
                    class="button_right"
                    @click="handleSubmit"
                    >提交</a-button
                >
                <a-button type="primary" @click="handleActiveClose">关闭</a-button>
            </div>
        </a-form-model>
    </base-breadcrumb>
</template>

<script>
import {
    getSuperviseTaskDown,
    addSuperviseTaskDown,
    updateSuperviseTaskDown,
    getPageSuperviseTaskUp,
} from '@/api/disciplineInspection/supervision' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import Selector from '@/components/Select/Selector'
import { STable } from '@/components' // 表格
import SelectJobUnit from '@/components/Select/SelectJobUnit'
import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject'
import SelectOrgPeople from '@/components/Select/SelectOrgPeople'
// import SelectUnit from '@/components/Select/SelectUnit'
const columns = [
    {
        title: '序号',
        width: 80,
        dataIndex: 'index',
        customRender() {
            return arguments[2] + 1
        },
    },
    {
        title: '单位',
        ellipsis: true,
        dataIndex: 'orgName',
    },
    {
        title: '上报人员',
        ellipsis: true,
        dataIndex: 'upPersonName',
    },
    {
        title: '附件',
        ellipsis: true,
        dataIndex: 'fileInfos',
        scopedSlots: { customRender: 'fileInfos' },
    },
]
export default {
    name:'a'+ Date.now(),
    extends: new BaseEditPage(),
    components: {
        SelectJobUnit,
        SelectOrgPeople,
        STable,
    },

    data() {
        this.columns = columns
        return {
            customRender: (q) => {
                let result = q.name
                if (q.postPNames && q.postPNames.length) {
                    result = `${result} (${q.postPNames.join('/')}) `
                }
                return result
            },
            loading: false, // 加载控件
            editModel: 0, // 操作状态:0 查看;1 编辑;2 新增
            form: { code: '' }, // 表单

            rules: {
                taskName: [{ required: true, message: '请输入任务名称', trigger: 'change' }],
                orgList: [{ required: true, message: '请选择单位', trigger: 'change' }],
                level: [{ required: true, message: '请选择层级', trigger: 'change' }],
                date: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
                content: [{ required: true, message: '请输入主要内容', trigger: 'change' }],
                fileInfos: [{ type: 'array', required: true, message: '请上传附件', trigger: 'blur' }],
            }, // 校验规则
            init: false, // 初始化控件
            loadData: (parameter) => {
                const requestParameters = Object.assign({}, parameter, { query: { taskDownId: this.id } })
                return getPageSuperviseTaskUp(requestParameters).then((res) => {
                    return res
                })
            }, // 加载数据方法 必须为 Promise 对象
        }
    },
    watch: {
        // 监听附件实现附件校验
        'form.fileInfos'() {
            if (this.editModel != 0 && this.init) {
                this.$nextTick(() => {
                    this.$refs.ruleForm?.validateField('fileInfos')
                })
            }
        },
    },
    mounted() {
        this.$route.meta.title = ['监督任务查看', '监督任务编辑', '监督任务新增'][this.editModel]
        // 不为添加时请求详情
        if (this.editModel != 2) {
            this.loading = true
            getSuperviseTaskDown(this.id)
                .then((res) => {
                    this.loading = false
                    res.data.date = []
                    res.data.date[0] = res.data.taskDateStart
                    res.data.date[1] = res.data.taskDateEnd
                    this.form = { ...res.data }
                    this.$nextTick(() => {
                        this.form.orgList = res.data.orgList
                        this.init = true
                    })
                })
                .catch(() => {
                    this.loading = false
                })
        } else {
            this.$nextTick(() => {
                this.init = true
            })
        }
    },
    computed: {
        formList() {
            return [
                {
                    keyName: 'taskName',
                    type: 'BaseInput',
                    label: '任务名称',
                    disabled: this.editModel == 0 || this.form.downStatus == 1,
                },
                {
                    keyName: 'date',
                    type: 'a-range-picker',
                    placeholder: ['请选择日期', '请选择日期'],
                    disabled: this.editModel == 0 || this.form.downStatus == 1,
                    label: '时间',
                    attrs: {
                        valueFormat: 'YYYY-MM-DD',
                    },
                },
                {
                    keyName: 'level',
                    disabled: this.editModel == 0 || this.form.downStatus == 1,
                    label: '所属层级',
                    type: Selector,
                    attrs: {
                        urlType: 'union',
                        selectType: '1',
                    },
                },
                {
                    type: SelectJobUnit,
                    keyName: 'orgList',
                    disabled: this.editModel == 0 || this.form.downStatus == 1,
                    label: '单位',
                    attrs: {
                        form: this.form,
                        isSelf: false,
                        mode: 'multiple',
                        isClear: this.editModel != '0',
                        isEdit: this.editModel == '1' || this.editModel == '0',
                    },

                    span: 24,
                },
                {
                    keyName: 'content',
                    type: 'BaseTextarea',
                    label: '主要内容',
                    disabled: this.editModel == 0,
                    span: 24,
                },
                {
                    slot: true,
                    keyName: 'fileInfos',
                    label: '附件',
                    span: 24,
                },
            ]
        },
    },
    methods: {
        getOption(name, e) {
            this.form.code = e?.code
            // console.log(this.form.code)
        },
        /**
         * 提交表单
         */
        handleSubmit() {
            let that = this
            let api = [updateSuperviseTaskDown, addSuperviseTaskDown][that.editModel - 1] // 根据操作切换url地址
            // 校验表单
            that.$refs.ruleForm.validate((e) => {
                if (e) {
                    // 提交表单
                    that.loading = true
                    that.form.taskDateStart = that.form.date[0]
                    that.form.taskDateEnd = that.form.date[1]
                    let form = that.$clone(that.form)

                    api(form)
                        .then(() => {
                            that.loading = false
                            that.$message.success('提交成功！')
                            that.$multiTab.close()
                        })
                        .catch(() => {
                            that.loading = false
                        })
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.file_prompt {
    color: #999;
}
</style>